@use "../variables.scss";

.PreflightChecks--wrapper {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.PreChecksBox-wrapper {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

  .watch-icon {
    border-radius: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
  }
}

.preflight-button {
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid var(--primary-color);
}

.preflight-check-row {
  padding: 8px;
  margin-top: 15px;
  border-radius: 6px;
  background-color: #ffffff;

  &.warn {
    background-color: #fffdf6;
    .PreflightMessageRow p {
      color: var(--warning-color);
    }
  }
  &.fail {
    background-color: #feefef;
    .PreflightMessageRow p {
      color: #f65c5c;
    }
  }
}
